import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "@/views/sys/Home";
import login from "@/views/sys/login";

Vue.use(VueRouter)

// 非嵌套路由(如登录/404)
export const globalRoutes = [
    {
        path: '/',
        redirect: '/login',
        name: 'root',
    },
    {
        path: '/login',
        name: 'login',
        component: login
    },
    {
        path: '*',
        name: '404',
        component: () => import('@/views/error-page/404'),
    }
];

// 嵌套路由--嵌套左+(上/下)整体布局
export const asyncRoutes = [
    {
        path: '/home',
        component: Home,
        redirect: '/home/main',
        children:[
            {
                path:'main',
                component: () => import('@/views/dashboard'),
                name: 'main',
                meta: { title: 'main', icon: 'dashboard', affix: true }
            },
            {
                path: 'table',
                component: () => import('@/views/table/table-test'),
                name: 'table',
                meta: { title: 'table', icon: 'dashboard', affix: true }
            }
        ]
    },
    {
        path: '/about',
        name: 'About',
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    },
];



const router = new VueRouter({
    routes:globalRoutes.concat(asyncRoutes)
})

//全局前置守卫
router.beforeEach((to, from, next) => {

    console.log('即将要进入的目标 路由对象')
    console.log(to);

    console.log('当前导航正要离开的路由')
    console.log(from);

    next();


    //next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
    //
    // next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
    //
    // next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
    //
    // next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
    //
    // next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调

});

//全局后置钩子
//全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
router.afterEach((to, from) => {
    console.log('=============================')
    console.log('即将要进入的目标 路由对象'+to.fullPath)
    console.log(to);
    console.log('当前导航正要离开的路由'+from.fullPath)
    console.log(from);
});


export default router
